<template lang="html">
  <div class="bill-frame">
    <!-- {{excelArr}} -->
    <!-- eslint-disable no-alert, no-console -->
    <div class="mask" v-if="maskShow">
      <div class="container">
        <div class="item a"></div>
        <div class="item b"></div>
        <div class="item c"></div>
      </div>
    </div>
    <table class="table-excel" v-if="normal">
      <thead>
        <tr>
          <!-- <th>序号</th> -->
          <th v-for="(item, attr) in excelArr3[0]">{{attr}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in excelArr3">
          <!-- <td>{{index + 1}}</td> -->
          <td v-for="(value, attr) in item">{{value}}</td>
        </tr>
      </tbody>
    </table>
    <table class="table-excel" v-if="!normal">
      <!-- <caption>{{excelUrl}}</caption> -->
      <thead>
        <tr>
          <th>序号</th>
          <th v-for="(item, attr) in excelArr1[0]">{{attr}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td v-for="(item, attr) in excelArr1[0]">{{item}}</td>
        </tr>
      </tbody>
    </table>
    <!--  -->
    <br>
    <table class="table-excel" v-if="!normal">
      <thead>
        <tr>
          <th>序号</th>
          <th v-for="(item, attr) in excelArr1[1]">{{item}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in excelArr2">
          <td>{{index + 1}}</td>
          <td v-for="(value, attr) in item">{{value}}</td>
        </tr>
      </tbody>
    </table>
    <!-- eslint-disable no-alert, no-console -->
  </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
  name: 'NewBill',
  data () {
    return {
      // storeID: this.$store.state.user.jxStoreId,
      excelArr1: [],
      excelArr2: [],
      excelArr3: [],
      excelUrl: '',
      maskShow: false,
      normal: false
    }
  },
  async created () {
    // 允许双指缩放
    let meta = document.querySelector('meta[name=viewport]')
    // meta.content = 'initial-scale=1.0,maximum-scale=1.0,user-scalable=1,minimal-ui'
    // console.log(meta)
    // // 得到网址
    // let url = await (await fetch('v2/financial/ShowStoreLatestBill?storeID=' + this.storeID)).text()
    // let excelUrl = url
    // this.excelUrl = url
    let params = new URLSearchParams(window.location.search)
    let excelUrl = params.get('path')
    let normal = JSON.parse(params.get('normal'))
    this.normal = normal
    // let excelUrl = window.location.href.split('path=')[1].split('&')[0]
    // let excelUrl = 'https://image.jxc4.com/storeBill/100118_4748bee49e4811e98f40525400e86dc0.xlsx'
    // let excelUrl = 'https://image.jxc4.com/storeBill/100118_d83ef4729d8511e9acce525400e86dc0.xlsx'
    console.log('网址', normal, excelUrl)
    // console.log('asdfdsfds', window.location)
    

    this.maskShow = true
    // 请求文件
    fetch(excelUrl, {referrerPolicy: 'no-referrer'}).then(res => {
      return res.blob()
    }).then(res => {
      // this.excelBlob = res
      console.log('res', res)
      let reader = new FileReader()
      reader.readAsBinaryString(res)
      reader.onload = () => {
        let data = reader.result

        this.wb = XLSX.read(data, {
          type: 'binary'
        })
        console.log(this.wb)
        let json = XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]])
        let excelData = json
        console.log('excelData', excelData)

        // console.log(that)
        if (normal) {
          let keys = Object.keys(excelData[0])
          console.log(keys)
          let jsonKeys = {}
          keys.forEach(item => {
            jsonKeys[item] = ''
          })
          this.excelArr3 = excelData.map(item => Object.assign({}, jsonKeys, item))
        } else {
          this.excelArr1 = excelData.splice(0, 2)
          let keys = Object.keys(excelData[0])
          console.log(keys)
          let jsonKeys = {}
          keys.forEach(item => {
            jsonKeys[item] = ''
          })
          // console.log(jsonKeys)
          this.excelArr2 = excelData.map(item => Object.assign({}, jsonKeys, item))
          console.log('excelData1', this.excelArr1)
          console.log('excelData2', this.excelArr2)
        }
        this.maskShow = false
      }
    }).catch(err => {
      console.log('出错了', err)
      this.maskShow = false
    })
  },
  beforeDestroy () {
    // 禁止双指缩放
    let meta = document.querySelector('meta[name=viewport]')
    meta.content = 'initial-scale=1.0,maximum-scale=1.0,user-scalable=0,minimal-ui'
    console.log(meta)
  }
}
</script>

<style lang="scss" scoped>
.mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(black, .6);
  overflow: hidden;
}
caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777;
  text-align: left;
}
.bill-frame {
  // box-sizing: border-box;
  // margin: 20px;
}
.table-excel {
  // margin: 10px;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
  // width: 1400px;
  width: 100%;
  max-width: 100%;
  color: #333;
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    white-space: nowrap!important;
  }
  td {
    text-align: right;
  }
  th {
    // background: rgb(210, 236, 255);
    border-bottom-width: 2px;
    text-align: left;
  }
  thead {
    tr {
      th {
        // &:nth-of-type(1) {
        //   width: 20px;
        // }
        // &:nth-of-type(2) {
        //   width: 150px;
        // }
        // &:nth-of-type(3) {
        //   width: 94px;
        // }
        // &:nth-of-type(5) {
        //   width: 60px;
        // }
      }
    }
  }
  tbody {
    tr:nth-of-type(odd) {
      background-color: #f9f9f9;
    }
    tr {
      td {
        &:last-of-type {
          text-align: left !important;
        }
      }
    }
  }
}

.container {
position: fixed;
text-align: center;
width: 100px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.item {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background: orange;
animation: item 1s ease-in-out infinite;
}
.b {
animation-delay: .2s;
}
.c {
animation-delay: .4s;
}
@keyframes item {
0% {
transform: translateY(0);
opacity: 1;
}
50% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}

</style>
